﻿//必须引入的插件,可以调用里面的构造函数
import VueRouter from "vue-router"

//这里是自己的路由组件，根据自己创建的组件来引入
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

//调用(创建)构造函数并暴露
export default new VueRouter({
    routes:[
        //想在哪里进行二次跳转，就写在个配置里(用children)
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            children:[
                {
                    name: 'xinxi',
                    path: 'news',//注意路由底层给你加了'/'如果自己加'/'有可能还显示不出效果
                    component:News,
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    children:[
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:name',
                            component: Detail,

                            props($route){
                                return {id: $route.query.id, name: $route.query.name}
                            }
                        }
                    ]
                }
            ]
        },
        {
            name:'guanyu',
            path: '/about',
            component: About
        }
    ]
})


